<template>
    <div>
      <!-- 头部 -->
      <div class="top">
        <img src="../assets/img/logo.png" alt="">
      </div>
      <div class="top-green">
        <img src="../assets/img/h_top.jpg" alt="">
      </div>

      <!-- 导航 -->
      <div class="myNav">
        <ul>
          <li class='li1'><a href="">医院首页</a></li>
          <li class='li2'><a href="">医院概况</a>
            <div class='li2-div'>
              <span>医院简介</span>
              <span>医院领导</span>
            </div>
          </li>
          <li class='li3'><a href="">医疗信息</a></li>
          <li class='li4'><a href="">就医指南</a></li>
          <li class='li5'><a href="">患者服务</a></li>
          <li class='li6'><a href="">院务公开</a></li>
          <li class='li7'><a href="">联系我们</a></li>
        </ul>
      </div>

      <!-- 大图 -->
      <div class="content-img"></div>

      <!-- 科室 -->
      <div class='administrative'> 
          <ul>
            <li class="li1"><img src="../assets/img/Sn4.png" alt=""></li>
            <li><img src="../assets/img/lb2.jpg" alt=""></li>
            <li><img src="../assets/img/lb1.jpg" alt=""></li>
            <li><img src="../assets/img/lb6.jpg" alt=""></li>
            <li><img src="../assets/img/lb5.jpg" alt=""></li>
          </ul>
      </div>


      <journalism></journalism>
    </div>
</template>

<script>
import journalism from '@/components/journalism.vue'
export default {
    name: 'Home',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {
      journalism
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.top{
  padding-left: 100px;
}
.top-green{
  width: 1390px;
  height: 10px;
  margin: 0 auto;
  margin-bottom: 20px;
  img{
    width: 100%;
    height: 100%;
  }
}
.myNav{
  width: 100%;
  ul{
    width: 1100px;
    height: 50px;
    list-style: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    li{
      a{
        text-decoration: none;
        color: #000;
      }
    }
    a:hover{
        color: red;
        text-decoration: underline;
    }
    .li2{
      position: relative;
    }
    .li2:hover{
      .li2-div{
        display: block;
      }
    }
    .li2-div{
      position: absolute;
      top: 37px;
      display: none;
      left: -6px;
      width:120px;
      span{
        display:block;
        text-align: center;
        line-height: 40px;
        border-bottom: 1px red dashed;
        width: 100px;
        height:40px;
        background-color: blueviolet;
       
      }
    }
  }
}
.content-img{
  width:1390px;
  height: 350px;
  margin:0 auto;
  background-image: url(../assets/img/content.png);
}

.administrative{
  width: 100%;
  height: 104px;
  ul{
    display: flex;
    margin: 0 auto;
    margin-top: 20px;
    width: 1300px;
    // border: red 1px solid;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    .li1{
      width: 20%;
      box-sizing: border-box;
      background-color: #107B8F;
      height: 104px;
      // padding-left: 30px;
      text-align: center;
      padding-top: 20px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
  }
}


</style>
